<template>
	<div>
		<div id="cesiumContainer"></div>
    <!-- <div id="loadingOverlay"><h1>Loading...</h1></div> -->
    
      <table id="toolbar">
        <tbody>
          <tr>
            <!-- <td><button id="point">加点</button></td> -->
            <td><button id="line">描线</button></td>
            <td><button id="polygon">绘图</button></td>
          </tr>
        </tbody>
      </table>
  </div>
</template>

<script>
export default {
	data () {
		return {
		}
	},
	mounted () {
	var viewer = new Cesium.Viewer("cesiumContainer", {
    selectionIndicator: false,
    infoBox: false,
    terrainProvider: Cesium.createWorldTerrain(),
	});
	viewer.cesiumWidget.creditContainer.style.display = 'none';
	//检查一下是否支持取点
	if (!viewer.scene.pickPositionSupported) {
  	window.alert("This browser does not support pickPosition.");
	}
	//解除鼠标左键双击事件
	viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(
  	Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
	);
	//取点函数
  function createPoint(worldPosition) {
  	var point = viewer.entities.add({
      position: worldPosition,
    	point: {
        color: Cesium.Color.RED,
        pixelSize: 5,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
    });
    return point;
   
  }
  var drawingMode = "line"
  var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
  // document.getElementById('point').onclick = function () {
  //   drawingMode = "point"
  //   handler.setInputAction(function(event) {
      
  //     var earthPosition  = viewer.scene.pickPosition(event.position);
  //     if (Cesium.defined(earthPosition)) {
  //       createPoint(earthPosition);
	//     }  
  //   }, Cesium.ScreenSpaceEventType.LEFT_CLICK)//鼠标左击事件 
  //   console.log(drawingMode)
  // }
  // // console.log(drawingMode)
  document.getElementById('line').onclick = function () {
    drawingMode = "line"
    // console.log(drawingMode)
  }
  document.getElementById('polygon').onclick = function () {
    drawingMode = "polygon"
    // console.log(drawingMode)
  }
	function drawShape(positionData) {
  	var shape;
  	if (drawingMode === "line") {
    	shape = viewer.entities.add({
      	polyline: {
        	positions: positionData,
        	clampToGround: true,
          width: 3,
      	},
    	});
  	} else if (drawingMode === "polygon") {
    	shape = viewer.entities.add({
      	polygon: {
        	hierarchy: positionData,
        	material: new Cesium.ColorMaterialProperty(Cesium.Color.WHITE.withAlpha(0.7)),
        },
      });
    }
    return shape;
  }
  var activeShapePoints = [];
  var activeShape;
  var floatingPoint;
  var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

  handler.setInputAction(function (event) {
    // We use `viewer.scene.pickPosition` here instead of `viewer.camera.pickEllipsoid` so that
    // we get the correct point when mousing over terrain.
    var earthPosition = viewer.scene.pickPosition(event.position);
    console.log(earthPosition)
    // `earthPosition` will be undefined if our mouse is not over the globe.
    if (Cesium.defined(earthPosition)) {
      if (activeShapePoints.length === 0) {
        floatingPoint = createPoint(earthPosition);
        activeShapePoints.push(earthPosition);
        var dynamicPositions = new Cesium.CallbackProperty(function () {
          if (drawingMode === "polygon") {
            return new Cesium.PolygonHierarchy(activeShapePoints);
          }
          return activeShapePoints;
          }, false);
        activeShape = drawShape(dynamicPositions);
        }
      activeShapePoints.push(earthPosition);
      createPoint(earthPosition);
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  handler.setInputAction(function (event) {
    if (Cesium.defined(floatingPoint)) {
      var newPosition = viewer.scene.pickPosition(event.endPosition);
      if (Cesium.defined(newPosition)) {
        floatingPoint.position.setValue(newPosition);
        activeShapePoints.pop();
        activeShapePoints.push(newPosition);
      }
    }
  }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
  // Redraw the shape so it's not dynamic and remove the dynamic shape.
  function terminateShape() {
    activeShapePoints.pop();
    drawShape(activeShapePoints);
    viewer.entities.remove(floatingPoint);
    viewer.entities.remove(activeShape);
    floatingPoint = undefined;
    activeShape = undefined;
    activeShapePoints = [];
  }
  handler.setInputAction(function (event) {
    terminateShape();
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
  viewer.camera.setView({
       destination:Cesium.Cartesian3.fromDegrees(116.46,39.92,10000000.0),
     }); // 设置初始位置
  viewer.camera.lookAt(Cesium.Cartesian3.fromDegrees(-122.2058, 46.1955, 1000000.0));
// viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
	}
}
</script>

<style scoped>
   /* @import url(../templates/bucket.css); */
	 #toolbar {
		 position: fixed;
		 left: 20px;
		 top: 100px;
	 }
</style>
